<template>
    <div class="settlement">
        <el-form class="el_form" :inline="true">
            <el-form-item label="团长手机号：" prop="leaderPhone">
                <el-input v-model="form.leaderPhone" placeholder="输入团长手机号"></el-input>
            </el-form-item>
            <el-form-item label="团员手机号：" prop="memberPhone">
                <el-input v-model="form.memberPhone" placeholder="输入团员手机号"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="resetForm">重置</el-button>
                <el-button type="primary" @click="settlement(multipleSelection, 1)">批量结算</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="tableLoading" :data="tableData.data" style="font-size: 12px"
            :cell-style="{ padding: '8px' }" border @selection-change="handleSelectionChange">
            <el-table-column type="selection" :selectable="selectable" width="55" />
            <el-table-column prop="leaderPhone" label="团长手机号" align="center" />
            <el-table-column prop="memberPhone" label="被分享人手机号" align="center" />
            <el-table-column prop="cleared" label="是否已结算团长分红" align="center">
                <template v-slot="scope">
                    <el-tag type="success" v-if="scope.row.cleared">是</el-tag>
                    <el-tag type="danger" v-else>否</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="分享时间" align="center" />
            <el-table-column label="操作" align="center">
                <template v-slot="scope">
                    <el-popconfirm title="是否已结算?" @confirm="settlement(scope.row, 0)" v-if="!scope.row.cleared">
                        <template #reference>
                            <el-button type="text" size="small">结算</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background style="float: right; margin-top: 10px; margin-right: 30px"
            layout="prev, pager, next, jumper, ->, total" :page-size="tableData.size" :total="tableData.total"
            @current-change="currentChange" />
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
import { getShare, setShareClear } from '/@/api/api'
import TableComponents from '/@/components/tableComponents/index.vue';
import { ElMessage } from 'element-plus';
const selectable = (row) => !row.cleared;
const multipleSelection = ref([]);
const emits = defineEmits(['close'])
const tableLoading = ref(false);
const form = reactive({
    leaderPhone: '',
    memberPhone: '',
})
const tableData = reactive({
    data: [],
    page: 1,
    size: 10,
    total: 0
})
function getTableData() {
    tableLoading.value = true;
    const params = {
        current: tableData.page,
        size: tableData.size,
		status: 1,
        ...form
    }
    getShare(params).then((res: any) => {
        if (res.code == 200) {
            tableData.data = res.data.records;
            tableData.total = res.data.total;
            tableLoading.value = false;
            multipleSelection.value = [];
        }
    })
}
function search() {
    tableData.page = 1;
    getTableData()
}
function resetForm() {
    form.leaderPhone = '';
    form.memberPhone = '';
    search();
}
function settlement(row, type) {
    let params;
    if (type == 0) {
        params = {
            id: [row.id]
        }
    } else {
        if (row.length == 0) {
            ElMessage.error('请选择需要结算的分享记录！');
            return;
        }
        params = {
            id: row.map(item => item.id)
        };
    }
    setShareClear(params).then((res: any) => {
        if (res.code == 200) {
            ElMessage({
                message: '结算成功！',
                type: 'success',
            });
            getTableData()
        }
    })
}
function currentChange(val) {
    tableData.page = val;
    getTableData();
}
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}
onMounted(() => {
    getTableData();
})
</script>
<style lang='scss' scoped>
.el-table .warning-row {
    background: #fff;
}

.el-table .success-row {
    background: #f7fbff;
}

.settlement {
    padding: 20px;
}
</style>